<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入css样式，layui.css-->
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项一</a></dd>
            <dd><a href="javascript:;">选项二</a></dd>
            <dd><a href="javascript:;">选项三</a></dd>
            <dd><a href="nav.html">跳转项</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="nav.html">移动模块</a></dd>
            <dd><a href="nav.html">后台模版</a></dd>
            <dd><a href="nav.html">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="nav.html">云市场</a></li>
    <li class="layui-nav-item"><a href="nav.html">社区</a></li>
</ul>

<!--引入js脚本，jquery.js-->
<script type="text/javascript" src="layui/layui.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>